<template>
	<view class="container">
		<view class="box">
			<view class="_roomstyle">
				<view class="__bdi">
					<view class="boxstyle" :class='flag==0?"active":""' @click="regi">区域
						<i-icon class="iconone" size="20px" color="black" @click="regi" :name="iconame"></i-icon>
					</view>
					<view class="boxstyle" :class='flag==1?"active":""' @click="regio">租金
						<i-icon class="iconone" size="20px" color="black" @click="regio" :name="iconam"></i-icon>
					</view>
					<view class="boxstyle" style="width: 24%;" :class='flag==2?"active":""' @click="region">方式/户型
						<i-icon class="iconone" size="20px" color="black" @click="region" :name="icona"></i-icon>
					</view>
					<view class="boxstyle" :class='flag==3?"active":""' @click="regions">筛选
						<i-icon class="iconone" size="20px" color="black" @click="regions" :name="icone">
						</i-icon>
					</view>
					<view class="boxsty">
						<i-icon class="icontow" size="16px" color="#343434" name="arrow-up-down-line"></i-icon>
					</view>
				</view>
			</view>
			<view class="option" :class='flag==3?"selects":"selec"'>
				<view class="_title">
					房源特色
				</view>
				<view class="_price">
					<text :class='colonel==1?"activoe":""' @click="coclickn">电梯房</text>
					<text :class='colonelu==1?"activoe":""' @click="coclickw">朝南</text>
					<text :class='colonely==1?"activoe":""' @click="coclicks">免中介费</text>
					<text :class='colonelt==1?"activoe":""' @click="coclickf">公共阳台</text>
					<text :class='colonelr==1?"activoe":""' @click="coclicka">公共厨房</text>
					<text :class='colonele==1?"activoe":""' @click="coclickq">智能门锁</text>
				</view>
				<view class="buttons">
					<view type="default" class="btnn">重置</view>
					<view type="default" class="btnw">确定</view>
				</view>
			</view>
			<view class="option" :class='flag==2?"selects":"selec"'>
				<view class="_title">
					户型
				</view>
				<view class="_price">
					<text :class='colonel==1?"activoe":""' @click="coclickn">一室户</text>
					<text :class='colonelu==1?"activoe":""' @click="coclickw">二室户</text>
					<text :class='colonely==1?"activoe":""' @click="coclicks">三室户</text>
					<text :class='colonelt==1?"activoe":""' @click="coclickf">四室户</text>
					<text :class='colonelr==1?"activoe":""' @click="coclicka">更大户型</text>
				</view>
				<view class="buttons">
					<view type="default" class="btnn">重置</view>
					<view type="default" class="btnw">确定</view>
				</view>
			</view>
			<view class="option" :class='flag==1?"selects":"selec"'>
				<!-- <view class="_title">
					租金
				</view> -->
				<view class="_pricess">
					<view class="section">不限</view>
					<view class="section">1000元以下</view>
					<view class="section">1000-1500元</view>
					<view class="section">1500-2000元</view>
					<view class="section">2000-3000元</view>
					<view class="section">3000-5000元</view>
					<view class="section">5000元以上</view>
				</view>
				<view class="buttoss">
					<view class="custom">
						自定义
						<input type="text" value="" placeholder="最低价" />
						-
						<input type="text" value="" placeholder="最高价" />元
					</view>
				</view>
			</view>

			<view class="option" :class='flag==0?"selects":"selec"'>
				<view class="_title">
					区域
				</view>
				<view class="_price">

				</view>
			</view>


		</view>
		<view class="_seat">

		</view>
	</view>
</template>

<script>
	export default {
		name: "Popup",
		data() {
			return {
				// Selects:false,
				arrys: ["电梯房", "朝南", "免费中介", "公共阳台", "公共厨房", "智能门锁"],
				colonel: 0,
				colonelu: 0,
				colonely: 0,
				colonelt: 0,
				colonelr: 0,
				colonele: 0,
				flag: 2,
				iconame: "arrow-down-s-line",
				iconam: "arrow-down-s-line",
				icona: "arrow-up-s-line",
				icone: "arrow-down-s-line"
			};
		},
		methods: {
			coclickn() {
				if (this.colonel == 0) {
					this.colonel = 1
				} else {
					this.colonel = 0
				}
			},
			coclickw() {
				if (this.colonelu == 0) {
					this.colonelu = 1
				} else {
					this.colonelu = 0
				}
			},
			coclicks() {
				if (this.colonely == 0) {
					this.colonely = 1
				} else {
					this.colonely = 0
				}
			},
			coclickf() {
				if (this.colonelt == 0) {
					this.colonelt = 1
				} else {
					this.colonelt = 0
				}
			},
			coclicka() {
				if (this.colonelr == 0) {
					this.colonelr = 1
				} else {
					this.colonelr = 0
				}
			},
			coclickq() {
				if (this.colonele == 0) {
					this.colonele = 1
				} else {
					this.colonele = 0
				}
			},

			regi() {
				this.flag = 0
				this.iconame = "arrow-up-s-line"
				this.iconam = "arrow-down-s-line"
				this.icona = "arrow-down-s-line"
				this.icone = "arrow-down-s-line"
			},
			regio() {
				this.flag = 1
				this.iconame = "arrow-down-s-line"
				this.iconam = "arrow-up-s-line"
				this.icona = "arrow-down-s-line"
				this.icone = "arrow-down-s-line"
			},
			region() {
				this.flag = 2
				this.iconame = "arrow-down-s-line"
				this.iconam = "arrow-down-s-line"
				this.icona = "arrow-up-s-line"
				this.icone = "arrow-down-s-line"
			},
			regions() {
				this.flag = 3
				this.iconame = "arrow-down-s-line"
				this.iconam = "arrow-down-s-line"
				this.icona = "arrow-down-s-line"
				this.icone = "arrow-up-s-line"
				// this.Selects=true

			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 1250rpx;

		.box {
			width: 100%;
			height: 60%;
			background-color: white;

			.location {
				// background-color: white;
				width: 100%;
				height: 80rpx;
				opacity: 1;

				.local {
					display: inline-block;
					margin-right: 10rpx;
					margin-left: 30rpx;
					vertical-align: top;
					margin-top: 20rpx;
				}

				.iconone {
					display: inline-block;
					margin-top: 10rpx;
				}

				.inpts {
					display: inline-block;
					width: 70%;
					height: 60srpx;
					margin-left: 15rpx;
					// background-color: blue;
					// line-height: ;
					position: relative;
					vertical-align: top;
					margin-top: 10rpx;

					.inp {
						width: 85%;
						height: 55rpx;
						border-radius: 15px;
						padding-left: 70rpx;
						color: black;
						border: 2px solid #9c9c9c;
						font-size: 12px;
					}

					.imgone {
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						left: 25rpx;
						top: 9px;
					}
				}
			}

			._roomstyle {
				width: 100%;
				height: 90rpx;
				overflow: hidden;
				// background-color: green;
				border-bottom: 1px solid #cccccc;

				.__bdi {
					width: 100%;
					height: 70rpx;
					// background-color: yellow;
					padding-left: 16rpx;
					margin-top: 20rpx;
					overflow: hidden;

					.active {
						color: #f17d30;
					}

					.boxstyle {
						width: 16%;
						height: 60rpx;
						// background-color: gray;
						margin-top: 10rpx;
						margin-left: 20rpx;
						display: inline-block;
						overflow: hidden;

						// font-size: 12px;
						.iconone {
							display: inline-block;
							vertical-align: middle;

						}
					}

					.boxsty {
						width: 10%;
						height: 60rpx;
						// background-color: gray;
						margin-top: 10rpx;
						margin-right: 10rpx;
						padding-top: 10rpx;
						// display: inline-block;
						float: right;
						overflow: hidden;
					}
				}
			}

			.selects {
				display: block;
			}

			.selec {
				display: none;
			}

			.option {
				width: 100%;
				height: 500rpx;
				// background-color: red;
				padding-top: 20rpx;

				._title {
					width: 100%;
					height: 50rpx;
					font-weight: 600;
					// background-color: green;
					margin-left: 30rpx;
					// margin-right: 30rpx;
				}

				._pricess {
					width: 100%;
					height: 100%;

					// background-color: yellow;
					.section {
						width: 100%;
						height: 70rpx;
						// background-color: green;
						border-bottom: 1px solid #e5e5e5;
						text-align: center;
						padding-top: 10rpx;
					}
				}

				.buttoss {
					width: 100%;
					height: 100rpx;
					margin-top: 10rpx;
					// background-color: red;
					border-top: 1px solid #C9C9C9;
					text-align: center;

					.custom {
						width: 100%;
						height: 90%;
						margin-top: 20rpx;
						// background-color: green;
						// text-align: center;
						// padding-left: 55rpx;
						padding-top: 16rpx;

						input {
							display: inline-block;
							width: 20%;
							height: 80%;
							font-size: 12px;
							border-radius: 5px;
							margin-left: 10rpx;
							margin-right: 10rpx;
							background-color: #e7e7e7;
							// margin: 20rpx;
							text-align: center;
							vertical-align: middle;
						}
					}
				}

				._price {
					width: 750rpx;
					height: 85%;
					margin-top: 10rpx;
					// background-color: yellow;

					.activoe {
						background-color: #f17d30;
					}

					text {
						color: gray;
						display: inline-block;
						width: 25%;
						height: 15%;
						text-align: center;
						margin-right: 30rpx;
						margin-left: 30rpx;
						margin-top: 20rpx;
						padding-top: 10rpx;
						border-radius: 20px;
						border: 1rpx solid #c1c1c1;
					}
				}

				.buttons {
					width: 100%;
					height: 100rpx;
					margin-top: 70rpx;
					// background-color: red;
					border-top: 1px solid #C9C9C9;

					view {
						display: inline-block;
						// width: 40%;
						margin-left: 30rpx;
						height: 70rpx;
						border-radius: 15px;
						text-align: center;
						padding-top: 16rpx;
						margin-top: 10rpx;
					}

					.btnn {
						width: 30%;
						background-color: white;
						border: 1px solid #C9C9C9;
					}

					.btnw {
						width: 59%;
						background-color: #f17d30;
					}
				}
			}
		}

		._seat {
			width: 100%;
			height: 40%;
			background-color: gray;
			opacity: 0.7;
		}
	}
</style>
